<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>工具</title>
    <link rel="stylesheet" href="/mi/css/common/mi_tool.css">
</head>
<body>
    <div class="home-tool-bar">
        <a href="#" class="tool-item">
            <div class="icon">
                <img src="/mi/imgs/tool-1.png" alt="" class="static"><img src="/mi/imgs/tool-01.png" alt="" class="hover">
            </div>
            <span class="text">手机APP</span>
            <div class="pop-content">
                <img src="/mi/imgs/APP.png" alt="">
                <span class="desc">
                    扫码领取新人百元礼包
                </span>
            </div>
        </a>
        <a href="/mi/personal_center/portal" target="_blank" class="tool-item">
            <div class="icon">
                <img src="/mi/imgs/tool-2.png" alt="" class="static"><img src="/mi/imgs/tool-02.png" alt="" class="hover">
            </div>
            <span class="text">个人中心</span>
        </a>
        <a href="#" class="tool-item">
            <div class="icon">
                <img src="/mi/imgs/tool-3.png" alt="" class="static"><img src="/mi/imgs/tool-03.png" alt="" class="hover">
            </div>
            <span class="text">售后服务</span>
        </a>
        <a href="#" class="tool-item">
            <div class="icon"><img src="/mi/imgs/tool-4.png" alt="" class="static"><img src="/mi/imgs/tool-04.png" alt="" class="hover"></div>
            <span class="text">人工客服</span>
        </a>
        <a href="/mi/cart/shopping_cart" target="_blank"  class="tool-item">
            <div class="icon"><img src="/mi/imgs/tool-5.png" alt="" class="static"><img src="/mi/imgs/tool-05.png" alt="" class="hover"></div>
            <span class="text">购物车</span>
        </a>
        <a href="#" class="tool-item backtop" id="J_atop">
            <div class="icon">
                <img src="/mi/imgs/totop.png" alt="" class="static"><img src="/mi/imgs/totop_hover.png" alt="" class="hover">
            </div>
            <span class="text">回顶部</span>
        </a>
    </div>
    <script>
        var J_atop = document.getElementById("J_atop");
// 当网页向下滑动 854px 出现"返回顶部" 按钮
window.onscroll = function() { scrollFun() };

function scrollFun() {
    if (document.body.scrollTop > 854 || document.documentElement.scrollTop > 854) {
        J_atop.classList.add("active");
    } else {
        J_atop.classList.remove("active");
    }
}

//这里定义返回顶部的方法
function topFun() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

//点击返回顶部
J_atop.onclick = function() {
    topFun();
}
    </script>
</body>
</html>